<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row"><!--换行-->
                <div class="col-sm-12" style="text-align: center"><!--栅格系统，处理标题-->
                    <h1>{{msg}}</h1>
                </div>
            </div>

            <!--处理添加按钮-->
            <div class="row">
                <div class="col-sm-12">
                    <button @click="addRow" class="btn btn-primary btn-sm">添加</button>
                </div>
            </div>

            <!--处理表格-->
            <div class="row"><!--换行-->
                <div class="col-sm-12"><!--栅格系统-->
                    <table class="table table-striped table-bordered table-hover" width="100%">
                        <tr>
                            <th style="text-align: center">编号</th>
                            <th style="text-align: center">姓名</th>
                            <th style="text-align: center">年龄</th>
                            <th style="text-align: center">工资</th>
                            <th style="text-align: center">操作</th>
                        </tr>

                        <!--假数据看效果-->
                        <!--<tr style="text-align: center">
                            <td>1</td>
                            <td>张三</td>
                            <td>28</td>
                            <td>80000</td>
                            <td><a href="javascript:;">删除</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;">修改</a></td>
                        </tr>-->

                        <tr v-for="emp,index in emps" style="text-align: center;" :class="index%2==0?'warning':'danger'" :key="emp.id">
                            <td>{{emp.id}}</td>
                            <td>{{emp.name}}</td>
                            <td>{{emp.age}}</td>
                            <td>{{emp.salary}}</td>
                            <td>
                                <a href="javascript:;" @click="delRow(emp.id)" @click="delRow(emp.id)" class="btn btn-danger btn-sm">删除</a>&nbsp;&nbsp;&nbsp;
                                <a href="javascript:;" @click="detailRow(emp.id)" class="btn btn-info btn-sm">修改</a>
                            </td>
                        </tr>
                    </table>
                </div>

            <br>

            <!--处理表单-->
            <div class="row">
                <div class="col-sm-12">
                    <!--增加form表单来添加数据-->
                    <form action="">
                        <div v-show="emp.id"> <!--如果emp.id为0或者null,或者'',都等价于false-->
                            <!--这里的form-group会自动换行，所以不需要在后面加<br>-->
                            <div class="form-group">
                                <label >编号:</label>
                                <input type="text" class="form-control" readonly v-model="emp.id">
                            </div>

                        </div>
                        <div class="form-group">
                            <label >姓名:</label>
                            <input type="text"  class="form-control" v-model="emp.name">
                        </div>
                        <div class="form-group">
                            <label >年龄:</label>
                            <input type="text" class="form-control" v-model="emp.age">
                        </div>
                        <div class="form-group">
                            <label >工资:</label>
                            <input type="text" class="form-control" v-model="emp.salary">
                        </div>
                        <input type="button" class="btn btn-info btn-sm btn-block" @click="saveOrEdit" value="提交信息">
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>

    //创建axios的默认配置对象
    var instance =  axios.create({
        timeout:5000,//修改请求超时时间
        baseURL:"http://localhost:8082"
    });

    //响应拦截器
    instance.interceptors.response.use(res => {return res},err => alert("后台接口有错误"));

    var app = new Vue({
        el:"#app",
        data:{
            msg:"员工列表",
            emps:[],//定义员工列表
            emp:{},//定义对象
        },
        methods:{
            delRow(id){
                // console.log(id);
                if(window.confirm("您确定要删除吗?")){
                    // var _this = this;
                    //    发送axios请求，根据id删除员工, 删除成功后，重新发送请求：查询所有员工信息

                    instance.delete("/emp/" + id).then((res) => {
                        // alert("删除成功");
                        // axios.get("http://localhost:8082/emp").then(function (res) {
                        //     _this.emps = res.data;
                        // }).catch(function (error) {
                        //     alert("查询失败");
                        // });

                        //由于箭头函数（匿名函数）中没有windows对象，
                        // 它的this就是指外部的对象，也就是vue实例，所以这里可以直接用this
                        // _this.findAll();
                        this.findAll();

                    })
                }
            },

            //抽取可重用的代码到一个函数中，从而实现抽象功能的提取
            findAll() {
                // var _this = this;
                instance.get("/emp").then((res) => {
                    this.emps = res.data;
                })

            },

            saveOrEdit(){//保存或者编辑
                if (!this.emp.name) {alert('请输入员工姓名');return false;}//如果为空，报警后退出方法
                if (!this.emp.age) {alert('请输入员工年龄');return false;}
                if (!this.emp.salary) {alert('请输入员工工资');return false;}
                //发送axios异步请求,保存员工信息
                // var _this = this;
                instance.post("/emp",this.emp).then((res) => {
                    //保存成功后，清空本次保存数据
                    this.emp = {};
                    //添加后，查询所有，更新展示后的数据
                    this.findAll();
                    alert("保存或更新成功");
                })
            },

            detailRow(id){//定义根据id查询出对应员工信息，用于回显数据
                // console.log(id);
                // var _this = this;
                //发送axios请求,根据查询一个
                instance.get("/emp/"+id).then((res) => {
                    // console.log(res.data);
                    this.emp = res.data
                })
            },

            addRow(){
                this.emp = {};//赋值为空 ,清空数据（方便清除误点修改后的回显数据）
            },


        },
        computed:{},

        //初始化阶段 beforeCreate 内部事件 生命周期 created el data methods computed beforeMount mounted  运行阶段 beforeUpdate updated  销毁阶段 beforeDestroy  destroyed
        created(){
            // this.emps = [{id:1,name:"小陈",age:23,salary:23000}];
            //发送axios请求查询所有员工列表
            // console.log(this);//vue实例
            // var _this = this;
            // axios.get("http://localhost:8082/emp").then(
            //     function (res) {
            //         // 注意：这里不能直接使用this,因为axios中的this代表windows实例，而不是vue实例
            //         // console.log(res.data);
            //         // console.log(this);//windows实例
            //         _this.emps = res.data;
            //     }
            // ).catch(function (err) {
            //     alert('查询员工列表出现错误，请稍后再试！')
            // })
            this.findAll();

        }


    });
</script>


